#{extends 'main.html' /}
#{set title:product.name /}

#{set 'moreScripts'}
	<script type="text/javascript">
	
	$(function(){
		
		var setLinkStyle = function(e){
			$(".productLinks li").css("font-weight","normal");
			$(e).css("font-weight","bold");
		}
		
		$("#LinkOverview").click(function(){
			$("#overview").css("display","block");
			$("#specifications").css("display","none");
			setLinkStyle(this);
		});
		
		$("#LinkSpecifications").click(function(){
			$("#overview").css("display","none");
			$("#specifications").css("display","block");
			setLinkStyle(this);
		});
		
		$("#thumbs li").mouseover(function(){
			$(this).css("padding","2px").css("border","2px solid #red");
			var imgSrc = $(this).children("img").attr("src");
			$("#datailImage .bigImage").attr("src",imgSrc);
		}).mouseout(function(){
			$(this).css("padding","3px").css("border","1px solid #cccccc")
		});
	});
	
	
	</script>
#{/set}

<table cellpadding="0" cellspacing="0" border="0" class="mainContent2" align="center">
	<tr>
		<td class="top"></td>
	</tr>
	<tr>
		<td>
			<h1 class="title">${product.name}</h1>
			<ul class="productLinks">
				<li id="LinkOverview" style="cursor:hand;cursor:pointer;font-weight:bold">Overview</li>
				<li id="LinkSpecifications" style="cursor:hand;cursor:pointer">Specifications</li>
				<li>Brochure</li>
				<li>Purchase</li>
			</ul>
			<div style="float:left;width:100%"></div>
			<div id="overview">
				${product.overview.raw()}
			</div>
			<div id="specifications">
				${product.specifications.raw()}
			</div>
			<div id="datailImage">
				%{
					if(product.images.size()>0){
				}%
					<img src="${play.configuration['attachments.download.prefix']+product.images.get(0)}" class="bigImage" width="400"/>
				%{
					}else if(product.detailImage!=null){
				}%
					<img src="${play.configuration['attachments.download.prefix']+product.detailImage}" class="bigImage" width="400"/>
				%{
					}else{
				}%
					<img src="" class="bigImage" width="400"/>
				%{
					}
				}%
				
				%{
				if(product.images.size()>1){
				}%
				<ul id="thumbs">
				#{list items:product.images,as:'image'}
					<li><img src="${play.configuration['attachments.download.prefix']+image}" height="50"/></li>
				#{/list}
				</ul>
				%{
				}
				}%
			</div>
			
		</td>
	</tr>
	<tr>
		<td class="bottom"></td>
	</tr>
</table>